<template>
  <div>
    <div v-if="drop">
      <!-- 输入框显示时 -->
      <el-popover v-if="hasFillDesc" :effect="'dark'" placement="top" :width="150" trigger="hover" :content="fillDesc" popper-class="custom-popover">
        <template #reference>
          <el-input
            type="number"
            v-model="inputValue"
            @input="handleInput"
            :min="0.0"
            :max="999999999.99"
            style="width: 100%"
            :controls="false"
            class="no-spin custom-input"
          ></el-input>
        </template>
      </el-popover>
      <el-input
        v-else
        type="number"
        v-model="inputValue"
        @input="handleInput"
        :min="0.0"
        :max="999999999.99"
        style="width: 100%"
        :controls="false"
        class="no-spin custom-input"
      ></el-input>
    </div>
    <div v-else>
      <!-- 输入框不显示时 -->
      <el-popover v-if="hasFillDesc" :effect="'dark'" placement="top" :width="150" trigger="hover" :content="fillDesc" popper-class="custom-popover">
        <template #reference>
          <span>{{ modelValue }}</span>
        </template>
      </el-popover>
      <span v-else>{{ modelValue }}</span>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue';

// 定义 props
const props = defineProps({
  modelValue: {
    type: [String, Number, null],
    default: null // ✅ 设置默认值，允许父组件不传值
  },
  drop: {
    type: Boolean,
    required: true
  },
  fillDesc: {
    type: String,
    default: ''
  }
});

// 定义 emits
const emit = defineEmits(['update:modelValue']);

// 使用 ref 来管理输入框的值
const inputValue = ref(props.modelValue);

// 监听 props.modelValue 的变化，同步到 inputValue
watch(
  () => props.modelValue,
  (newValue) => {
    inputValue.value = newValue;
  }
);

// 计算属性：判断是否有备注
const hasFillDesc = computed(() => {
  return props.fillDesc && props.fillDesc !== '无';
});

// 处理输入事件
const handleInput = (value) => {
  // 确保 value 是一个有效的数字
  const numericValue = parseFloat(value);
  if (!isNaN(numericValue)) {
    // 如果输入有效，更新 modelValue
    emit('update:modelValue', numericValue);
  } else {
    // 如果输入无效，保持原值不变
    emit('update:modelValue', props.modelValue);
  }
};
</script>

<style scoped lang="scss">
/* 自定义输入框样式 */
.custom-input {
  width: 100%;
  border-radius: 4px; /* 圆角 */
  font-size: 14px; /* 字体大小 */
  color: #606266; /* 字体颜色 */
  padding: 0 3px; /* 内边距 */
  transition:
    border-color 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out; /* 过渡效果 */
}

.custom-input .el-input__inner {
  height: 30px; /* 设置输入框高度 */
  line-height: 30px; /* 设置行高与高度一致，实现垂直居中 */
  padding: 0 12px; /* 调整左右内边距 */
  text-align: center; /* 水平居中 */
}

/* 输入框聚焦状态 */
.custom-input:focus {
  border-color: #409eff; /* 聚焦时边框颜色 */
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.3); /* 聚焦时阴影效果 */
  outline: none; /* 去掉默认的聚焦轮廓 */
}

/* 输入框悬停状态 */
.custom-input:hover {
  border-color: #c0c4cc; /* 悬停时边框颜色 */
}

/* 隐藏数字输入框的上下箭头 */
.no-spin ::-webkit-inner-spin-button,
.no-spin ::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox 中隐藏上下箭头 */
.no-spin[type='number'] {
  -moz-appearance: textfield;
}
</style>
